<template>
  <div :style="{ ...coreStyle.width('100%'), ...coreStyle.marginBottom(24) }">
    <a-upload-dragger :showUploadList="false" :multiple="multiple" :before-upload="beforeUpload" :style="{ ...coreStyle.padding(0, 16, 0, 16) }">
      <p class="ant-upload-drag-icon"><CoreIcon icon="ant-design:inbox-outlined" :size="50" /></p>
      <p class="ant-upload-text">单击或拖动文件到此区域以上传</p>
      <p class="ant-upload-hint" v-if="multiple">支持单个或批量上传</p>
      <p class="ant-upload-hint" v-else>支持单个上传</p>
    </a-upload-dragger>
    <a-table
      rowKey="key"
      :columns="fileListColumns"
      :data-source="fileListDataSet"
      :pagination="false"
      bordered
      :style="{ ...coreStyle.marginTop(10) }"
    >
      <template #action="{ text, record, index }">
        <a @click="fileListDeleteRow(record, index)">
          <CoreIcon icon="fluent:delete-28-regular" color="#ed4014" :size="22" />
        </a>
      </template>
    </a-table>
    <a-button type="dashed" :disabled="toFileUploadBtnDisabled" :loading="fileUploadBtnLoading" block :style="{ ...coreStyle.marginTop(10) }" @click="fileUploadBtnClick">
      <CoreIcon icon="grommet-icons:send" :size="14" />
      上传
    </a-button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

import { mapStores } from 'pinia'

import { useFileUploadStore } from '/@/store/modules/cn/core/dirs/fileUploadStore'

export default defineComponent({
  name: 'FileUpload',
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    fileModule: {
      type: String,
      required: true
    },
  },
  emits: [
    'change'
  ],
  data() {
    return {
      fileListColumns: [
        {
          title: '文件名',
          dataIndex: 'name',
          align: 'center',
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          slots: { customRender: 'action' },
          width: 65,
        },
      ],
      fileListDataSet: [],
      fileUploadBtnDisabled: false,
      fileUploadBtnLoading: false,
    }
  },
  computed: {
    ...mapStores(useFileUploadStore),
    toFileUploadBtnDisabled() {
      return this.fileListDataSet.length > 0 && this.fileUploadBtnDisabled ? false : true
    },
  },
  methods: {
    beforeUpload(file, fileList) {
      if (this.multiple) {
        this.fileListDataSet.push({ key: this.$getUUID32(), name: file.name, file: file })
      } else {
        this.fileListDataSet = [{ key: this.$getUUID32(), name: file.name, file: file }]
      }
      this.fileUploadBtnDisabled = true
      return false
    },
    fileListDeleteRow(record, index) {
      this.$message.success('文件删除成功！', 3)
      this.fileListDataSet.splice(index, 1)
    },
    fileUploadBtnClick() {
      this.fileUploadBtnLoading = true
      let param: FormData = new FormData()
      param.append('fileModule', this.fileModule)
      this.fileListDataSet.forEach((eo: object) => {
        param.append('file', eo.file)
      })
      this.fileUploadStore.fileUpload(param).then((res: Res<string>) => {
        if (res.succ) {
          this.$message.success(res.msg, 3)
          if (this.multiple) {
            this.$emit('change', res.data)
          } else {
            this.$emit('change', res.data[0])
          }
          setTimeout(() => {
            this.fileUploadBtnLoading = false
            this.fileUploadBtnDisabled = false
          }, 1000)
        } else {
          this.$message.error(res.msg, 6)
          setTimeout(() => { this.fileUploadBtnLoading = false }, 3000)
        }
      }).catch(err => {
        setTimeout(() => { this.fileUploadBtnLoading = false }, 3000)
      })
    },
    resetFiles() {
      this.fileListDataSet = []
      this.fileUploadBtnDisabled = false
    },
  },
  mounted() {
  }
})
</script>

<style scoped lang="less">

</style>
